<script setup lang="ts" name="personalInfo">
import HeadComp from "@/components/HeadComp.vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { storeToRefs } from "pinia";

const router = useRouter();
const userState = useUserStore();
const { loginInfo } = storeToRefs(userState);
const onDetail = (pathname: string) => {
  router.push(pathname);
};
</script>

<template>
  <div class="box">
    <van-cell-group inset class="cell-list">
      <van-cell title="头像" is-link>
        <div class="headInfo">
          <HeadComp size="middle" :name="loginInfo?.ssoUserName" />
        </div>
      </van-cell>
      <van-cell
        title="姓名"
        @click="onDetail('/base/changeName')"
        is-link
        value="张三"
      />
      <van-cell title="性别" is-link value="男" />
    </van-cell-group>
    <van-cell-group inset class="cell-list mt-md">
      <van-cell title="职位" is-link value="部门-字部门" />
    </van-cell-group>
    <van-cell-group inset class="cell-list mt-md">
      <van-cell title="电话" is-link value="+ 86-13104561234" />
    </van-cell-group>
  </div>
</template>

<style scoped lang="scss">
.box {
  padding-top: var(--margin-value);
  .headInfo {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
